<template>
  <div class="carousel-card">
    <el-carousel
      v-if="d.length !== 0"
      indicator-position="none"
      :autoplay="false"
      type="card"
      ref="carousel"
      @change="change"
      style="width: 100%"
      height="247px"
    >
      <el-carousel-item v-for="node in d" :key="node.title">
        <LineChart :line-data="node.data" :color="node.color"></LineChart>
      </el-carousel-item>
    </el-carousel>
    <div class="indicator">
      <i @click="prev" class="el-icon-back"></i>
      <div style="flex: 6;text-align: center">{{ title }}</div>
      <i @click="next" class="el-icon-right"></i>
    </div>
  </div>
</template>

<script>
import LineChart from "./LineChart.vue";
export default {
  props: {
    d: Array
  },
  data() {
    return {
      title: ""
    };
  },
  methods: {
    change(index) {
      this.title = this.d[index].title;
      this.$emit("change", index);
    },
    prev() {
      this.$refs.carousel.prev();
    },
    next() {
      this.$refs.carousel.next();
    }
  },
  mounted: function() {
    setTimeout(() => {
      this.change(0);
    }, 400);
  },
  components: { LineChart }
};
</script>
<style lang="scss" scoped>
.carousel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  border-radius: 6px;
  .indicator {
    width: 80%;
    display: flex;
    padding: 12px 0 36px;
    font-size: 16px;
    justify-content: space-around;
    color: #fff;
    align-items: center;
    i {
      flex: 1;
      cursor: pointer;
    }
  }
}
</style>
